import { Component } from '@angular/core';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { getO } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-charts',
  template: `
    <div class="apes-field-charts">
      <div>{{title}}</div>
      <apes-charts [id]="chartsId" [data]="chartsData" [option]="chartsOption"
                   [loading]="loading"></apes-charts>
    </div>
  `,
  styles: [`
    .apes-field-charts {
      margin-bottom: 16px;
    }
  `],
})
export class FormlyFieldCharts extends ApesField {

  title: any;
  chartsId: any;
  chartsOption: any;
  loading: boolean = false;
  ctx: any;
  chartsData: any;

  constructor(
    protected apiService: ApiService,
    protected events: Events,
    protected expressionService: ExpressionService,
    protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit() {
    this.title = this.to.title;
    this.ctx = this.formState;
    this.chartsId = this.to.chartsId ? this.to.chartsId : 'charts';
    this.chartsOption = getO(this.to.option);
  }

  ngAfterViewInit() {
    this.subject.subscribe(this.ctx, 'showChartsData', data => {
      this.chartsData = data;
      // this.chartsData = {
      //   dataset: {
      //     source: data,
      //   },
      // };
    })
  }

}
